<template>
  <page-frame>
    <div class="check02-in-main" style="vertical-align: top">
      <div class="toptitle">
        <div class="left">健康评估 - 新增评估</div>
        <div class="right">
          <div class="btns">
            <el-button @click="back">取消</el-button>
          </div>
        </div>
      </div>
      <div style="border-bottom: 1px solid #ccc;height: 1px; margin:8px 0px 20px 0px;"></div>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
        <!--基本信息-->
        <div class="panel">
          <div class="panel-title">
            <el-row :gutter="20">
              <el-col :span="6">
                <div class="grid-content bg-purple">基本信息</div>
              </el-col>
            </el-row>
          </div>
          <div class="panel-content">
            <el-row>
              <el-col :span="12">
                <el-form-item label="会员姓名">
                  <el-autocomplete v-model="memberView.memberName" :fetch-suggestions="querySearchAsync" placeholder="请输入会员姓名" @select="handleSelect" :disabled= "isdisabled"></el-autocomplete>
                </el-form-item>
              </el-col>
              <div class="btns">
                <el-button @click="historyStaff('ruleForm')" class="lightGreenBtn">历史评估</el-button>
              </div>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item  prop="sheetName" label="评估量表">
                  <el-select v-model="ruleForm.sheetName" placeholder="请选择评估量表" :disabled= "isdisabled">
                    <el-option v-for="item in options" :key="item.value" :label="item.sheetName" :value="item.sheetType" ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <div class="btns">
                <el-button @click="startStaff('ruleForm')" class="lightGreenBtn">开始评估</el-button>
              </div>
            </el-row>
          </div>
          <div class="panel-title">
            <el-row :gutter="20">
              <el-col :span="6">
                <div class="grid-content bg-purple">评估信息</div>
              </el-col>
            </el-row>
          </div>
          <div class="ability">
            <el-collapse v-model="activeName"  @change="handleChange">
              <el-collapse-item v-for="accessItems in ASSESS_ITEM" :name="accessItems.setId">
                <template slot="title">
                  {{accessItems.setName}} <i v-if="accessItems.complete == 0" style="color: gray;">未完成</i>
                  <i v-else-if="accessItems.complete == 1" style="color: green;">已完成</i>
                </template>
                <div class="assessmentContent" v-for="accessItem in accessItems.assessItemDTOList">
                  <div class="assessmentTitle" >
                    <label>{{accessItem.itemNo}}.{{accessItem.itemTitle}}</label>
                  </div>
                  <div class="assessmentItem">
                    <options :options="accessItem.assessItemResultDTOList"
                             :type="accessItem.type"
                             :other="accessItem.other"
                             :itemId="accessItem.itemId"
                             :setId = "accessItem.setId"
                             @updateOption = "updateOption"
                    ></options>
                  </div>
                </div>
                <div class="assessmentMark">
                  <reference :reference="accessItems.assessSetResultDTOList"></reference>
                </div>
                <div class="assessmentInput">
                  <inputs :results = "results"
                          :setresult = "accessItems.assessmentResultDTO"
                          :setId= "accessItems.setId"
                          :careJudgment = "accessItems.assessSetResultDTOList"
                          :member = "this.currentMemberObj"
                  ></inputs>
                </div>
              </el-collapse-item>
            </el-collapse>
            <div class="examine-result">
              <el-button type="info" class="lightGreenBtn" :disabled="disabled" @click="getResult">查看评估结果</el-button>
              <!--<el-button type="info" :disabled="disabled" @click="isPlan">制定服务计划</el-button>-->
            </div>
            <div class="evaluation-result" v-show="isResultShow">
              <resultSheet :resultEvaluation = "resultEvaluation" :member="this.currentMemberObj"  :resultHealthy="results" :itemResultVOList="this.itemResultVOList" @goto="goto"></resultSheet>
            </div>
          </div>
        </div>
      </el-form>
    </div>
  </page-frame>
</template>


<script>
  import commonApi from '../../service/member/commonApi';
  import checkInApi from '../../service/member/checkInApi';
  import outRegistrationApi from '../../service/serCenter/outRegistrationApi';
  import options from '../../components/assessment/abilityContent/options';
  import inputs from '../../components/assessment/abilityContent/inputs';
  import reference from "../../components/assessment/abilityContent/reference";
  import resultSheet from "../../components/assessment/abilityContent/resultSheet";
  import planMake from "../../components/assessment/planMake";

  export default {
    methods: {
      init(){
        this.getAllMember();
        this.getSheetName();
      },


      startStaff(formName){
        let self = this;
        if(self.memberView.memberName != ""){
          this.$refs[formName].validate((valid) => {
            if (valid) {
              this.isdisabled="true";
              this.loadProject(this.ruleForm.sheetName,this.memberId);
            }else{
              console.log('error submit!!');
              return false;
            }
          });
        }else{
          this.$message({
            type: 'warning',
            message: '请先选择会员再进行评估'
          })
        };
      },
      historyStaff(formName){
          if (this.memberName==""||this.memberName==null) {
            this.$message({
              message: '会员姓名不能全部为空!',
              type: 'warning'
            });
            return false;
          }else{
            this.$router.push({name: "assessmentHistory", params: {memberId: this.memberId,memberName:this.memberName}});
      }
      },
      /**
       * 返回
       */
      back(){
        this.$router.push({name: 'healthAssessment'});
      },
      /**
       * 筛选会员
       */
      querySearchAsync(queryString, cb) {
        var members = this.members;
        var results = queryString ? members.filter(this.createStateFilter(queryString)) : members;

        clearTimeout(this.timeout);
        this.timeout = setTimeout(() => {
            cb(results);
        console.debug(results);
      }, 1000);
      },
      createStateFilter(queryString) {
        return (state) => {
          return (state.memberName.indexOf(queryString.toLowerCase()) === 0);
        };
      },
      handleSelect(item) {
        this.memberInfor = item;
        this.memberId = item.memberId;
        this.memberName = item.memberName;
        this.currentMemberObj = item;
        this.currentMemberObj.actId=1;
      },
      /**
       * 获得所有会员
       */
      getAllMember(){
        let self = this;
        outRegistrationApi.getAllMemberInfor(self.memberView).then(function (response) {
          self.members = response.body.data;
          for(var i=0;i<self.members.length;i++){
            var  member = self.members[i];
            member.value = member.memberName;
          };
        })
      },

      /**
       * 获取评估量表
       */
      getSheetName(){
        let self = this;
        checkInApi.getSheetName().then(function(response) {
          self.options =response.body.data;
        })
      },

      /**
       *获取评估项目
       */
      loadProject(sheetType,memberId){
        let self = this;
        checkInApi.loadHealthyProject(sheetType,memberId).then(function(response){
          var data = response.body.data;
          if(data){
           self.ASSESS_ITEM = data.assessSetDTOList;
            var remain = 0;
            self.ASSESS_ITEM.forEach(function(accessItems){
              if(!accessItems.assessmentResultDTO){
                if(accessItems.complete == 0){
                  remain += 1;
                }
                accessItems.assessmentResultDTO = {
                  "assessId": 0,
                  "auditTime": "",
                  "auditUser": "",
                  "comment": "",
                  "rId": 0,
                  "resultValue": 0,
                  "setId": 0,
                  "sheetId": 0,
                  "resultName":""
                }
              }
            });
            self.results.assessId = data.assessId;
            self.results.sheetId = data.sheetId;
           // if(remain == 0){
            //  self.getResult();
           // }
          }
        });
      },

      goto(taskKey){
        this.$emit("goto",taskKey);
      },

      /**
       *获取评估信息
       */
      getProjectDetail(){
        let self = this;
        checkInApi.getProjectDetail(this.ruleForm.sheetName,this.memberId).then(function(response){
          self.ASSESS_ITEM = response.body.data;
        });
      },
      /**
       * 查看评估结果
       */
      getResult(){
        let self = this;
        self.currentView = "resultSheet";
        checkInApi.getAResult(self.results.assessId).then(function (response) {
          self.resultEvaluation = response.body.data;
          self.isResultShow = true;
        })
      },
      /**
       *
       *获得答案（子组件）
       */
      updateOption(val){
        if(val.itemId){
          for(var i=0;i<this.results.itemResultVOList.length;i++){
            if(this.results.itemResultVOList[i].itemId == val.itemId){
              this.results.itemResultVOList.splice(i,1);
            }
          }
          this.results.itemResultVOList.push(val);
        }
      },

    },
    components:{options,inputs, reference, resultSheet,planMake},
    mounted: function () {
      this.init();
    },
    data() {
      var validateMemberName = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请选择会员'));
        } else {
          callback();
        }
      };
      return {
        memberName: '',
        isdisabled: false,
        sheetName: '',
        members: [],
        memberView:{
          memberName: "",
        },
        ruleForm:{
          sheetName:'',
          memberName:''
        },
        memberInfor:{},
        sheetNames: [],
        memberId:'',
        options: [],
        rules: {
          memberName: [
            {required: true, validator:validateMemberName,trigger: 'change'},
          ],
          sheetName: [
            {type:'number',required: true, message: '请选择评估量表', trigger: 'change'}
          ],
        },
        sheetType:"",
        currentMemberObj:null,
        isResultShow:false,
        isSubmit:false,
        activeName:"1",
        radio2: 3,
        currentView:"resultSheet",
        currentAccessId:0,
        assessId:"",
        sheetId:0,
        itemResult:[],
        ASSESS_ITEM:[],
        results:{
          "assessId": 0,
          "auditTime": "",
          "auditUser": "",
          "comment": "",
          "itemResultVOList": [],
          "rId": 0,
          "resultValue": 0,
          "setId": 0,
          "sheetId": 0,
          "resultName":""
        },
        resultEvaluation:{
          "assessmentResultDTO": {},
          "setResultInfoDTOList": [],
          "sheetResultDTOList": []
        },
        careLevelOptions:null
      }
    },

  }
</script>
<style>
  .tabs {
    width: 100%;
  }

  .tabs .tabsTitle > li {
    font-size: 14px;
    display: inline-block;
    background-color: #a8a8b0;
    width: 33.2%;
    padding-top: 10px;
    padding-bottom: 10px;
    border-left: 1px solid #ffffff;
    text-align: center;
    cursor: pointer;
    color: #ffffff;
  }

  .tabs .tabsContent {

  }

  .input input {
    display: inline-block;
  }

  .check02-in-main .assessmentTitle{
    padding-bottom: 10px;
    font-size: 14px!important;
  }
  .check02-in-main .assessmentItem{
    padding-left: 15px;
    font-size: 14px!important;
  }
  .check02-in-main .assessmentItem label{
    display: block;
  }
  .check02-in-main .assessmentItem .el-radio+.el-radio,.el-checkbox+.el-checkbox{
    margin: 12px 0px!important;
  }
  .check02-in-main .assessmentItem textarea{
    width: 50%;
  }
  .check02-in-main .evaluation-result{
    background-color: #F2F8FE;
    padding:30px 60px;
  }
  .check02-in-main .examine-result{
    margin:20px;
  }

  .check02-in-main .reference{
    margin-bottom:7px;
  }
  .check02-in-main .assessmentInput{
    margin-top:20px;
  }
  .check02-in-main .assessmentInput label{
    margin-right:7px;
  }
  .check02-in-main .assessmentInput .el-row{
    margin-bottom:7px;
  }
  .check02-in-main .fen{
    color: #20a0ff;
    cursor: pointer;
  }
  .check02-in-main .fen:hover{
    color: #3fc6d2;
    cursor: pointer;
  }
</style>
